<template>
  <div>
    <Card>
      <p slot="title" class="card-title">
        <Icon type="home"></Icon>
        <span>企业管理员</span>
      </p>
      <div>
        <template>
          <Form ref="search" :model="search" :label-width="40">
            <Col span="3">
              <FormItem label="状态" prop="isDelete">
                <Select v-model="search.isDelete">
                  <Option value="">全部</Option>
                  <Option value="true">已停用</Option>
                  <Option value="false" >正常</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem label="关键字" prop="name" :label-width="60">
                <Input v-model="search.name" placeholder="姓名/手机号码"></Input>
              </FormItem>
            </Col>
            <Col span="2" style="margin-left:5px;">
              <Button type="primary"  @click="userData=initTableData();getList()">查詢</Button>
            </Col>
          </Form>
        </template>
      </div>
      <div style="clear:both;"></div>
      <div>
        <template>
          <div style="margin-bottom:10px;">
            <Row>
              <Col span="15">
                <Col span="3" style="width:auto;">
                  <Button type="info" @click="addUserModal=true">
                    <Icon type="md-add"></Icon>&nbsp;添加企业管理员
                  </Button>
                </Col>

                <Col span="3" style="width:auto;">
                  <Button :disabled="setting.loading" type="success" @click="getList()">
                    <Icon type="md-refresh"></Icon>&nbsp;刷新数据
                  </Button>
                </Col>

                <!-- <Button type="primary" @click="exportData(1)"><Icon type="ios-download-outline"></Icon>&nbsp;导出表格</Button> -->
              </Col>
            </Row>
          </div>
          <Table
            ref="table"
            class="margin-bottom-10"
            :columns="columns"
            :loading="setting.loading"
            :border="setting.showBorder"
            :data="userData.data"
          >
            <template slot-scope="{ row }" slot="role">{{getRoleName(row) }}</template>
            <template slot-scope="{ row }" slot="delete">{{ row.delete?"已停用":"正常"}}</template>
            <template slot-scope="{ row,index  }" slot="action">
              <Tooltip content="编辑" :transfer="true">
                <Button
                  size="small"
                  icon="ios-create-outline"
                  :disabled="row.delete"
                  type="default"
                  shape="circle"
                  @click="user=row;editModal=true;"
                ></Button>
              </Tooltip>
              <Tooltip content="重置密码" :transfer="true">
                <Button
                  size="small"
                  icon="ios-options-outline"
                  :disabled="row.delete"
                  type="default"
                  shape="circle"
                  @click="user=row;resetPasswordModal=true"
                ></Button>
              </Tooltip>
              <Tooltip content="停用" :transfer="true">
                <i-switch
                  size="small"
                  :value="row.delete"
                  v-model="row.delete"
                  :disabled="row.delete"
                  @on-change="deleteUser(row)"
                ></i-switch>
              </Tooltip>
            </template>
          </Table>
          <Page
            :total="userData.total"
            size="small"
            show-total
            show-elevator
            class="tr"
            @on-change="pageChange"
            :current.sync="userData.current"
            :page-size="userData.size"
          ></Page>
        </template>
      </div>
    </Card>
    <AddUser v-if="addUserModal" :roles="roles" @cancel="onModalCancel" @success="getList"/>
    <ResetPassword
      v-if="resetPasswordModal"
      :user="user"
      @cancel="onModalCancel"
      :title="title.password"
    />
    <UpdateUser
      v-if="editModal"
      :user="user"
      @cancel="onModalCancel"
      @success="getList"
      :title="title.edit"
    />
  </div>
</template>
<script>
// import dayjs from 'dayjs'
// import { post } from '@/libs/axios-cfg'
import AddUser from "./components/add.vue";
import UpdateUser from "./components/update.vue";
import ResetPassword from "./components/reset-password.vue";
import { baseUrl } from "@/libs/axios-cfg";

export default {
  data() {
    return {
      setting: {
        loading: false
      },
      title: {
        password: "重置密码",
        edit: "编辑资料"
      },
      uploadUrl: baseUrl + "/user/batchAddUser",
      uploadHead: {
        token: sessionStorage.getItem("token")
      },
      templateUrl: "",
      batchDisabled: false,
      search: {
        isDelete:"false"
      },
      user: {},
      resetPasswordModal: false,
      editModal: false,
      addUserModal: false,
      roles: [],
      userData: this.initTableData(),
      columns: [
        { title: "姓名", key: "name" },
        { title: "账号", key: "account" },
        { title: "状态", slot: "delete" },
        { title: "企业", key: "enterprise" },
        { title: "角色", slot: "role" },
        { title: "创建时间", key: "createdAt" },
        { title: "更新时间", key: "updatedAt" },
        { title: "更新人", key: "updatedName" },
        // { title: "审核人", key: "leaderName" },
        { title: "操作", slot: "action" }
      ]
    };
  },
  components: {
    // AddUser,UpdateUser,
    ResetPassword,
    UpdateUser,
    AddUser
  },
  created() {
    this.getList();
    this.getAllRole();
  },
  methods: {
    initTableData() {
      return {
        data: [],
        current: 1,
        size: 10
      };
    },
    getList() {
      var url = "/user/manager/list/{pageNo}";
      var ps = {};
      ps = Object.assign(ps, this.search);

      this.post(url, ps, { pageNo: this.userData.current }).then(res => {
        if (this.checkIsSsuccess(res)) {
          this.userData.data = res.data.content;
          this.userData.total = res.data.totalElements;
          this.userData.totalPages = res.data.totalPages;
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 0,
            closable: true
          });
        }
      });
    },
    deleteUser(data) {
      this.$Modal.confirm({
        title: "提示",
        content: "确定停用用户(停用后无法恢复)?",
        onOk: () => {
          var url = "/user/delete/{id}";
          var ps = {};

          this.post(url, ps, { id: data.id }).then(res => {
            this.$Modal.remove();
            if (this.checkIsSsuccess(res)) {
              this.$Message.success({
                content: "停用成功",
                duration: 3,
                closable: true,
                onClose: () => this.getList()
              });
            } else {
              this.$Message.error({
                content: res["msg"],
                duration: 3,
                closable: true,
                onClose: () => this.getList()
              });
            }
          });
        },
        onCancel: () => {
          data.delete = false;
        },
        loading: true
      });
    },
    pageChange() {
      this.getList();
    },
    getRoleName(row) {
      if (row.rolesNames) {
        let name = "";
        row.rolesNames.forEach(k => {
          name += k + ",";
        });
        name = name.substring(0, name.length - 1);
        return name;
      }
      return "";
    },
    getAllRole() {
      var url = "/user/getAllRoles";
      this.get(url).then(res => {
        if (this.checkIsSsuccess(res)) {
          this.roles = res.data;
        } else {
          this.$Message.error({
            content: res["msg"],
            duration: 0,
            closable: true,
            onClose: () => this.getList()
          });
        }
      });
    },
    onModalCancel(type) {
      if ("reset" == type) {
        this.resetPasswordModal = false;
      } else if ("edit" == type) {
        this.editModal = false;
      } else if ("add" == type) {
        this.addUserModal = false;
      }
    },
    uploadSuccess(response, file, fileList) {
      this.batchDisabled = false;
      if (this.checkIsSsuccess(response)) {
        let data = response.data;
        var msg = "批量新增用户成功！";
        this.refresh = true;
        this.$Message.success({
          content: msg,
          duration: 2,
          closable: true,
          onClose: () => {
            // this.clueData = this.initTableData();
            // this.getClueList();
            this.getList();
          }
        });
      } else {
        this.$Message.error({
          content: response.msg,
          duration: 2,
          closable: true
        });
      }
    },
    uploadError() {
      this.batchDisabled = false;
      this.$Message.error({
        content: "导入失败！",
        duration: 2,
        closable: true
      });
    },
    uploadBefore(file) {
      if ("application/vnd.ms-excel" != file["type"]) {
        this.$Message.error({
          content: "请选择csv格式的文件",
          duration: 2,
          closable: true
        });
        return false;
      }
      this.batchDisabled = true;

      return true;
    },
    download() {
      var ps = "";
      var url =
        baseUrl +
        "/user/downloadAddUserTemplete?downLoadId=" +
        sessionStorage.token;
      url += ps;
      window.open(url, "_blank");
    }
  }
};
</script>